import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Icon, Tools, SearchBar,TabBar } from 'weaver-mobile';
import { SearchAdvanced, ListViewPage } from 'weaver-mobile-page';
import { getTemplateBasicItem, getTemplateLinkItem, renderNoData } from '../public';
import { compareParams } from '../../util';
import BackTop from '../../public/back-to-top';
import RouteModal from '../communication/RouteModal';
const getLabel = Tools.getLabel;

/* 申请审批 */
@withRouter
@inject('applyStore')
@observer
export default class Apply extends React.Component {

  static defaultProps = {
    prefixCls: 'cowork-apply-approve',
  }

  constructor(props) {
    super(props);
    this.state = {
      path: props.location.pathname + '/detail',
      coworkId: '',
    }
  }

  componentDidMount() {
    const { applyStore: { getCoworkApplyPageList, getCoworkApplyApproveShareCondition } } = this.props;
    getCoworkApplyPageList();
    getCoworkApplyApproveShareCondition();
  }

  componentWillUnmount() {
    const { applyStore: { clearApprove, doApplyApproveCancel } } = this.props;
    clearApprove();
    doApplyApproveCancel();
  }

  getTemplateBottomItem = (curCls, type, name, clickFunc) => (
    <div className={`${curCls}-item`} onClick={clickFunc}>
      <Icon type={type} />
      {name}
    </div>
  )

  getTemplate = () => {
    const newTemp = {
      default: [{
        key: 'col_1',
        render: (data) => {
          const curCls = "cowork-template-list";
          return (
            <div className={curCls} key={data.id}>
              {getTemplateBasicItem(curCls, getLabel(390652, '申请主题'), data.namespan)}
              {getTemplateLinkItem(curCls, getLabel(368, '申请人'), data.resourceidspan,data.resourceid)}
              {getTemplateBasicItem(curCls, getLabel(6141, '申请部门'), data.departmentidspan)}
              {getTemplateBasicItem(curCls, getLabel(390653, '申请时间'), data.applydatespan)}
            </div>
          );
        },
      }],
    };
    return newTemp;
  }

  renderSeparator = (section, index) => {
    const { applyStore: { showApplyApproveCheck, applyApproveList,doApplyApprove } } = this.props;
    const curCls = "cowork-template-bottom";
    const datas = toJS(applyApproveList.data);
    const id = datas[index].id;
    return (
      <div className={`${curCls}-wrap`} key={`${section}_${index}`}>
        {!showApplyApproveCheck && <div className={curCls}>
          {this.getTemplateBottomItem(curCls, 'approval', getLabel(142, '批准'), () => {doApplyApprove({ applyIds: id ,status:1})})}
          {this.getTemplateBottomItem(curCls, 'batch-rejection', getLabel( 385760, '拒绝'), () => {doApplyApprove({ applyIds: id ,status:0})})}
        </div>}
      </div>
    );
  }
  
  render(){
    const { prefixCls, applyStore: { applyApproveList, applyApproveSearch ,getCoworkApplyPageList, doApplyApproveCancel, doApplyApproveSelectAll, doApplyApproveselectNone,doApplyApproveReset
      ,applyApproveAdValue,updateApplyApproveAdvance,showApplyApproveCheck,doApplyApprove} } = this.props;
    const datas = toJS(applyApproveList.data);
    const themeSelectedKeys = toJS(applyApproveList.selectedRowKeys);
    const buttonGroupData = [
      { key: 'reset',
        text: getLabel(2022,"重置"),
        onClick: doApplyApproveReset
      },
      { key: 'submit',
        text: getLabel(826,"确定"),
        onClick: () => {
          getCoworkApplyPageList();
          this.props.history.go(-1);
        },
        type: 'primary',
      }
    ];
    let compare = true;
    if (applyApproveSearch) {
      compare = compareParams(toJS(applyApproveSearch.form.formData), toJS(applyApproveSearch.form.defaultValues));
    }
    const adType = compare ? 'filter-o' : 'filter-o-hot';

    return (
      <div className={prefixCls}>
        <SearchBar 
          placeholder={getLabel(390654,"请输入主题")}
          value={applyApproveAdValue}
          showExtraButton
          extraButton={[
            { key: 'advanced', show: <Icon key={adType} type={adType} /> },
          ]}
          onExtraButtonClick={() => this.props.history.push(applyApproveSearch.path)}
          onChange={val => updateApplyApproveAdvance(val)}
          onSubmit={getCoworkApplyPageList}
        />
        <SearchAdvanced
          store={applyApproveSearch}
          buttonGroupData={buttonGroupData} 
        />
        {showApplyApproveCheck && (
          <div className="cowork-template-top">
            <span className="cowork-template-top-cancel" onClick={doApplyApproveCancel}>{getLabel(201, '取消')}</span>
            <span>{getLabel(31503,"已选择")}{themeSelectedKeys.length}{getLabel(390655,"个主题")}</span>
            {themeSelectedKeys.length !== datas.length ?
              <span className="cowork-template-top-all" onClick={doApplyApproveSelectAll}>{getLabel(556, '全选')}</span> :
              <span className="cowork-template-top-all" onClick={doApplyApproveselectNone}>{getLabel(387379,"取消全选")}</span>
            }
          </div>
        )}
        <div className={`cowork-template ${showApplyApproveCheck && 'cowork-template-checked'}`}>
          {datas.length === 0 ? renderNoData : (
            <BackTop
              visibilityHeight='200'
              modal
              target='wm-list-view-page-modal-scrollview'
            >
            <ListViewPage.Normal
              store={applyApproveList}
              showCheck={showApplyApproveCheck}
              getTemplate={this.getTemplate}
              renderSeparator={this.renderSeparator}
              onRowClick={(selectedRowKeys) => {
                this.setState({coworkId: selectedRowKeys.coworkid});
                // this.props.history.push(this.state.path + selectedRowKeys.id);
                this.props.history.push(`${this.state.path}?id=${selectedRowKeys.coworkid}`);
              }}
            />
          </BackTop>
          )}
          {showApplyApproveCheck && (
               <TabBar>
               <TabBar.Item
                 title={getLabel(83212,"批量批准")}
                 key='approval'
                 icon={<Icon type='batch-approval'/>}
                 onPress={() => doApplyApprove({ applyIds: themeSelectedKeys.join(','),status:1,dotype:'batch'})}
               />
               <TabBar.Item
                 title={getLabel(83213,"批量拒绝")}
                 key='delete'
                 icon={<Icon type='batch-rejection'/>}
                 onPress={() => doApplyApprove({ applyIds: themeSelectedKeys.join(','),status:0,dotype:'batch'})}
               />
             </TabBar>
          )}
        </div>
        <RouteModal/>
      </div>
    );
  }
}